<template>
  <view :id="id" class="curveChart"></view>
</template>
<script>
import * as echarts from "../../static/plugins/js/echarts/echarts.js";

export default {
  props: {
    id: String,
    chartData: {
      type: Array,
      default: () => [],
    },
    dataMap: {
      type: Object,
      default: () => {
        return {
          x: "time",
          y: "count",
        };
      },
    },
    setting: {
      type: Object,
      default: () => {
        return {
          max: true, // 是否设置纵坐标最大值
          axisLabel: false, // 是否显示纵坐标的百分号
          smooth: false, // 曲线是否光滑
          legendData: [], // 图例文字
          area: false, // 是否绘制区域面积
          areaColor: [], // 颜色
        };
      },
    },
    // chartDataBar: {
    //   type: Array,
    //   default: () => [],
    // },
    // settingBar: {
    //   type: Object,
    //   default: () => {
    //     return {
    //       max: true, // 是否设置纵坐标最大值
    //       axisLabel: false, // 是否显示纵坐标的百分号
    //       smooth: false, // 曲线是否光滑
    //       legendData: [], // 图例文字
    //       area: false, // 是否绘制区域面积
    //       areaColor: [], // 颜色
    //     };
    //   },
    // },
    // hasSwitch: {
    //   type: Boolean,
    //   default: false,
    // },
    // isSwitch: {
    //   type: Boolean,
    //   default: false,
    // },
  },
  data() {
    return {
      myChart: null,
      option: {
        // backgroundColor: "#000",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // animation: false,
          },
        },
        legend: {
          show: false,
          type: "scroll",
          // left: 10,
          data: [],
          textStyle: {
            color: "#fff",
          },
        },
        axisPointer: {
          link: [
            {
              xAxisIndex: "all",
            },
          ],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            onZero: true,
          },
          data: [],
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#6e7079",
              width: 1,
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#6e7079",
              width: 1,
            },
          },
          nameTextStyle: {
            color: "#6e7079",
            fontSize: 13,
            // padding: this.setting?.nameTextStyle?.padding || 0,
            // lineHeight: 15,
          },
        },
        dataZoom: {
          type: "inside",
          show: true,
          realtime: true,
          start: 0,
          end: 50,
          zoomOnMouseWheel: true,
          moveOnMouseMove: true,
          moveOnMouseWheel: true,
        },
      },
    };
  },
  watch: {
    chartData: {
      handler(val) {
        console.log(val, "新值");
        // this.ininChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.ininChart();
  },
  methods: {
    ininChart() {
      let legendData = this.setting?.legendData || [];
      // let timeData = [],
      //   gridData = [],
      //   xAxisData = [],
      //   yAxisData = [],
      //   seriesData = [],
      //   dataZooms = [],
      //   indexArr = [],
      //   legendArr = [];
      // let doc = document.getElementById(this.id);
      // doc.style.height = height;
      // console.log(seriesLen, index, height, doc.style.height, "height");
      let option = {
        // ...this.option,
        tooltip: {
          trigger: "axis",
        },
        grid: {
          height: 100,
          left: "6%",
          right: "5%",
          top: "3%",
          bottom: "4%",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            onZero: true,
          },
          data: ["111", "222", "333"],
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#6e7079",
              width: 1,
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#6e7079",
              width: 1,
            },
          },
          nameTextStyle: {
            color: "#6e7079",
            fontSize: 13,
            // padding: this.setting?.nameTextStyle?.padding || 0,
            // lineHeight: 15,
          },
        },
        series: [
          {
            type: "line",
            interval: 0,
            name: "111",
            data: [1, 2, 3, 4, 5],
            lineStyle: {
              width: 5,
            },
          },
          {
            type: "line",
            interval: 0,
            name: "222",
            data: [33, 8, 31, 24, 25],
            lineStyle: {
              width: 5,
            },
          },
          {
            type: "line",
            interval: 0,
            name: "222",
            data: [23, 1, 3, 14, 15],
            lineStyle: {
              width: 5,
            },
          },
        ],
      };
      this.myChart = echarts.init(document.getElementById(this.id));
      this.myChart.setOption(option, true, true);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="less">
.curveChart {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
  // background: #000;
}
</style>
